<template>
    <div class="drawList-box">
        <my-header :title="title"></my-header>

        <img src="https://img5.jianke.com/mall/vmall/index/201905/de95f74c1f6049629682da7c43f2e042.jpg?imageMogr2/format/jp2" alt="">

        <!-- 1 -->
        <div class="content">
            <img src="https://img5.jianke.com/mall/vmall/index/201903/1ea9df3e4bd44cc78e6e521ccdb973b5.jpg?imageMogr2/format/jp2" alt="">
            <!-- 公有组件 -->
            <man-swiper :num="1"></man-swiper>
        </div>

        <!-- 2 -->
        <div class="content">
            <img src="https://img5.jianke.com/mall/vmall/index/201903/207339f0aafb4a4eba842ac614f50dbe.jpg?imageMogr2/format/jp2" alt="">
            <!-- 公有组件 -->
            <man-swiper :num="2"></man-swiper>

            <img src="https://img5.jianke.com/mall/vmall/index/201903/9c6c97a8282549d699a18bd0fd3e5a13.jpg?imageMogr2/format/jp2" alt="">
            <!-- 公有组件 -->
            <man-swiper :num="3"></man-swiper>

            <img src="https://img5.jianke.com/mall/vmall/index/201902/8b13b91a035449a2af9afa350a36ca97.jpg?imageMogr2/format/jp2" alt="">
            <!-- 公有组件 -->
            <man-swiper :num="4"></man-swiper>
        </div>

        <div class="worldList">
            <van-tabs @click="onClick">
                <van-tab v-for="(value, index) in content" :title="value" :key="index">
                    <div class="recommend-list">
                        <div class="rl-item" v-for="(value, index) in arr" :key="index">
                            <router-link :to="'/product/' + value.productCode">
                                <div class="wrap">
                                    <img :src="value.productImageUrl" alt="">
                                    <div class="rl-text">
                                        <span class="name">{{ value.productName }}</span>
                                        <span class="info">{{ value.introduction }}</span>
                                        <p class="list-price">
                                            <span class="price-left">
                                                <em>￥</em>
                                                {{ parseInt(value.productPrice/100) + '.00' }}
                                            </span>
                                            <span class="price-right">立即购买</span>
                                        </p>
                                    </div>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import myHeader from 'Components/common/myHeader'
import manSwiper from './man-swiper'
import {mapActions, mapGetters} from 'vuex'

export default {
    data() {
        return {
            title: '全球购',
            content: ['全家幸享','男性健康','女性健康','中老年健康'],
            moblie5List: [],
            moblie5List1: [],
            moblie5List2: [],
            moblie5List3: [],
            moblie5List4: [],
            arr: [],
        }
    },
    components: {
        myHeader,manSwiper
    },
    methods: {
        onClick(index, title) {
            switch(title) {
                case '全家幸享':
                    return this.arr = this.moblie5List;
                case '男性健康':
                    return this.arr = this.moblie5List1;
                case '女性健康':
                    return this.arr = this.moblie5List2;
                case '中老年健康':
                    return this.arr = this.moblie5List3;
            }

        },
        handleScroll () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            let offsetTop1 = document.querySelector('.van-tabs__wrap') && document.querySelector('.van-tabs__wrap').offsetTop;
            // console.log(offsetTop1)
            // console.log(document.querySelector('.van-tabs__wrap'))
            document.querySelector('.van-tabs__wrap') && scrollTop > offsetTop1 ? document.querySelector('.van-tabs__wrap').style.position="fixed" : document.querySelector('.van-tabs__wrap').style.position="absolute"
        },
        ...mapActions(['getMobile5'])
    },
    computed: {
        ...mapGetters(['getMobile5s'])
    },
    async mounted () {
        await this.getMobile5('846404,846408,852404,851931,851929,851933,852249,849533,849532,852005,852039,849536,849539,849548,854002,854390,854006,854389,854007,852004,849340,852015,852002,854391,849543,849534');
        this.moblie5List = this.getMobile5s && this.getMobile5s || [];
        this.arr = this.moblie5List

        await this.getMobile5('855624,856742,855623,854038,854034,854035,854039,854037,846405,856241,849545,852001,849544,854005,854004,849538,849338,849339,852272');
        this.moblie5List1 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('846407,851930,851934,851932,849555,849552,852410,849537,852506,852006,854036,851999,852041,849540,849549,849560,849547,851997,852038,852003,849535,854003,849343,852010,854388,849342,852271,852009,849546,849341');
        this.moblie5List2 = this.getMobile5s && this.getMobile5s || [];
        await this.getMobile5('846136,846406,846403,849550,849335,852008,849345,852000,851996,851995,854393,851998,849348,849559,849542,849558,852011,852007');
        this.moblie5List3 = this.getMobile5s && this.getMobile5s || [];

        // 改变背景颜色
        // document.querySelector('.van-nav-bar__title').style.color = '#ffffffcc';
        // document.querySelector('.van-icon').style.color = '#ffffffcc';
        // document.querySelectorAll('.van-icon')[1].style.color = '#ffffffcc';
        // document.querySelector('.van-hairline--bottom').style.background = 'rgb(7, 82, 114)';
        // document.querySelector('.van-hairline--bottom').style.opacity = '0.9'

        // 获取滚动距离
        window.addEventListener('scroll', this.handleScroll)
        
    }
}
</script>

<style lang="scss" scoped>
    @import 'Css/common-clounm.scss';

    a {
        color: #333;
    }

    .van-nav-bar {
        z-index: 9999 !important;
    }
    .van-tabs--line .van-tabs__wrap {
        height: .46rem !important;
    }

    .recommend-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        background-color: #f5f5f5;
        padding: 0rem 0.05rem;
        .wrap {
            background: #fff !important;
        }
    }

    img {
        width: 100%;
        vertical-align: middle;
    }
</style>

